<!DOCTYPE html>
<html>
<head>
	<title>Star Rating widget Demo1 Page</title>
	
	<!-- demo page css -->
	<link rel="stylesheet" type="text/css" media="screen" href="css/demos.css?b38"/>

	<!-- demo page js -->
	<script type="text/javascript" src="js/jquery.min.js?v=1.4.2"></script>
	<script type="text/javascript" src="js/jquery-ui.custom.min.js?v=1.8"></script>

	<!-- Star Rating widget stuff here... -->
	<script type="text/javascript" src="js/jquery.ui.stars.js?v=3.0.0b38"></script>
	<link rel="stylesheet" type="text/css" href="css/jquery.ui.stars.css?v=3.0.0b38"/>
	<script type="text/javascript">
		$(function(){
			$("#ratings").children().not(":radio").hide();
			$("#ratings").stars({
				callback: function(ui, type, value)
				{
					$.post("demo1.php", {rate: value}, function(data)
					{
						$("#ajax_response").html(data);
					});
				}
			});
		});
	</script>

</head>

<body class="basic">


	<div class="pageDesc">
		<p>
			Basic example with :radio elements
		</p>
	</div>


	<div class="pageBody">
		<h4>Basic :radio (<a href="demo1a.html?b38" class="">before</a>|<a href="demo1b.html?b38" class="unlink">after</a>)</h4>

		
		<form id="ratings" action="demo1.php" method="post">
			
			<input type="radio" name="rate" value="1" title="Poor" id="rate1" /> <label for="rate1">Poor</label><br />
			<input type="radio" name="rate" value="2" title="Fair" id="rate2" /> <label for="rate2">Fair</label><br />
			<input type="radio" name="rate" value="3" title="Average" id="rate3" /> <label for="rate3">Average</label><br />
			<input type="radio" name="rate" value="4" title="Good" id="rate4" /> <label for="rate4">Good</label><br />
			<input type="radio" name="rate" value="5" title="Excellent" id="rate5" /> <label for="rate5">Excellent</label><br />

			<input type="submit" value="Rate it!" />

		</form>

		<p id="ajax_response"></p>
	</div>


</body>
</html>
